<template>
    <div class="center">
        <!-- 版心 -->
        <div class="container">
            <!-- 主体 -->
            <div class="center-body">
                <el-row :gutter="10" class="all">
                    <!-- 左侧列表 -->
                    <el-col :span="4">
                        <div class="left">
                            <!-- <div class="base-info"> -->
                            <el-row :gutter="10">
                                <!-- 基础信息 -->
                                <el-col>
                                    <div class="base-info navigation-block grid-content">
                                        <div class=" account-avatar"
                                            style="cursor: pointer;border-radius: 50%;background-image: url(&quot;https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1&quot;);">
                                        </div>
                                        <div class="name-container">
                                            <div>
                                                <span style="font-size: 16px;">132253_053u</span>
                                                <span class="level_box medium">
                                                    <router-link to="/level-instruction" style="color:#fff;font-size: 13px;"><i  style="border-radius: 10%">LV1</i></router-link>
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <el-row>
                                                <el-col :span="12" >
                                                    <p>0</p>
                                                    <p>关注</p>
                                                </el-col>
                                                <el-col :span="12">
                                                    <p>0</p>
                                                    <p>粉丝</p>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-col>

                                <!-- 资源动态 -->
                                <el-col>
                                    <div class="navigation-block mb-10">
                                        <div class="navigation-item">
                                            <router-link class="navigation-item-content item" to="/center/dynamics" :class="{leftLine:route.path.includes('/dynamics')}"><p>资源动态</p></router-link>
                                        </div>
                                    </div>
                                </el-col>
                                <!-- 我的会员 -->
                                <el-col>
                                    <div class="navigation-block">
                                        <div class="navigation-item">
                                            <router-link to="/my_member" class="navigation-item-content item"  :class="{leftLine:route.path.includes('/my_member')}"><div>我的会员</div></router-link>
                                            <router-link to="/center/wallet" class="navigation-item-content item" :class="{leftLine:route.path.includes('/wallet')}"><span>我的钱包</span></router-link>
                                            <router-link to="/center/coupons" class="navigation-item-content item" :class="{leftLine:route.path.includes('/coupons')}"><span>我的优惠券</span></router-link>
                                            <router-link to="/center/buyer/my_order" class="navigation-item-content item" :class="{leftLine:route.path.includes('/buyer/my_order')}"><span>我买的订单</span></router-link>
                                            <!-- <a href="##" class="navigation-item-content">我卖的</a> -->
                                            <el-scrollbar>
                                                <el-menu
                                                    
                                                    @open="handleOpen"
                                                    @close="handleClose"
                                                    mode="vertical"
                                                    :collapse-transition="false"
                                                    default-active="2">
                                                    <el-sub-menu index="1">
                                                        <template #title>
                                                            <p style="width:100px"><span>我卖的</span></p>
                                                            <!-- <div style="{font-size: 14px;color: #111;cursor:pointer;text-decoration:none;padding:200px,200px;width:150px;padding-left:0px;}"  class="item"><span>我卖的</span></div> -->

                                                        </template>
                                                      
                                                        <el-menu-item-group>
                                                            <el-menu-item index="1-1">
                                                                <router-link to="/center/seller/orders_manager"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('orders_manager')}" class="sell-hover">订单管理</span></router-link>
                                                            </el-menu-item>
                                                            <!-- <el-menu-item index="1-1">订单管理</el-menu-item> -->
                                                            <el-menu-item index="1-2">
                                                                <router-link to="/center/seller/goods_manager"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('goods_manager')}" class="sell-hover">商品管理</span></router-link>
                                                            </el-menu-item>
                                                            <el-menu-item index="1-3">
                                                                <router-link to="/center/seller/customers_manager"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('customers_manager')}" class="sell-hover">客户管理</span></router-link>
                                                            </el-menu-item>
                                                            <el-menu-item index="1-4">
                                                                <router-link
                                                                    to="/center/seller/pending_payments_manager"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('pending_payments_manager')}" class="sell-hover">代收款</span></router-link>
                                                            </el-menu-item>
                                                            <el-menu-item index="1-5">
                                                                <router-link to="/mine/sell/minePreferentialManagement"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('minePreferentialManagement')}" class="sell-hover">优惠管理</span></router-link>
                                                            </el-menu-item>
                                                            <el-menu-item index="1-6">
                                                                <router-link to="/mine/sell/mineReviewsManagement"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('mineReviewsManagement')}" class="sell-hover">评价管理</span></router-link>
                                                            </el-menu-item>
                                                            <el-menu-item index="1-7">
                                                                <!-- <router-link to="/center/deposit"
                                                                    class="navigation-item-content"><span :class="{sellChecked:route.path.includes('deposit')}" class="sell-hover">保证金</span>
                                                                </router-link> -->
                                                                <div class="navigation-item-content" @click="toDeposit"><span :class="{sellChecked:route.path.includes('deposit')}" class="sell-hover">保证金</span></div>
                                                                
                                                            </el-menu-item>
                                                        </el-menu-item-group>
                                                    </el-sub-menu>
                                                </el-menu>
                                            </el-scrollbar>
                                        </div>

                                    </div>
                                </el-col>
                                <!-- 我的资料 -->
                                <el-col>
                                    <div class="navigation-block mt-10">
                                        <div class="navigation-item">
                                            <router-link to="/center/edit_info" class="navigation-item-content" :class="{leftLine:route.path.includes('/edit_info')}">我的资料</router-link>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- </div> -->
                    </el-col>
                    <!-- 右侧列表 -->
                    <el-col :span="18">
                        <div class="right">
                            <div class="grid-content-main">
                                <el-row>
                                    <el-col>
                                        <el-menu
                                            :default-active="centerStore.defaultActiveIndex"
                                            v-if="route.path.includes('order')"
                                            class="el-menu-demo "
                                            mode="horizontal"
                                            text-color="#111"
                                            active-text-color="red"
                                            @select="handleSelectTop"
                                            >
                                            <el-menu-item index="5"><span class="bottom-item">全部订单</span></el-menu-item>
                                            <el-menu-item index="0"><span class="bottom-item">待付款</span></el-menu-item>
                                            <el-menu-item index="1"><span class="bottom-item">待评价</span></el-menu-item>
                                            <el-menu-item index="2"><span class="bottom-item">待服务</span></el-menu-item>
                                            <el-menu-item index="3"><span class="bottom-item">待确认</span></el-menu-item>
                                            <el-menu-item index="4"><span class="bottom-item">退款/售后</span></el-menu-item>
                                        </el-menu>
                                        <div class="header-container x" v-if="route.path.includes('dynamics')">
                                            <div class=".header-tab-item "><span class="title" >资源动态</span></div>
                                        </div>
                                        <div class="header-container x" v-if="route.path.includes('my_member')">
                                            <div class=".header-tab-item "><span class="title">我的会员</span></div>
                                        </div>
                                        <div class="header-container x" v-if="route.path.includes('center/wallet')">
                                            <div class=".header-tab-item "><span class="title">我的钱包</span></div>
                                        </div>
                                        <div class="header-container x" v-if="route.path.includes('center/coupons')">
                                            <div class=".header-tab-item "><span class="title">我的优惠券</span></div>
                                        </div>
                                        <div class="header-container x" v-if="route.path.includes('edit_info')">
                                            <div class=".header-tab-item "><span class="title">编辑资料</span></div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col class="header-container">
                                        <router-view></router-view>
                                    </el-col>
                                </el-row>

                            </div>
                        </div>
                    </el-col>
                </el-row>

            </div>

        </div>

    </div>
</template>
<script setup lang="ts">
import { ref,nextTick } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {useCenterStore} from '@/store/modules/center'//引入
import { ElMessage } from 'element-plus';
const centerStore=useCenterStore()
// console.log(centerStore)
const route=useRoute()
const router=useRouter()
const ischoosed=ref(false)
//顶部切换
const handleSelectTop=async (key: string, keyPath: string[])=>{
    // console.log(key,keyPath,1111111)
    try {

    await centerStore.getAllOrderList(key)
        //清空input搜索关键字
        centerStore.keyWords=''
        
    } catch (error) {
        ElMessage.error(error)
        console.error(error)
    }
}


//左侧下拉框回调
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
    ischoosed.value=true
    
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
    ischoosed.value=false
}
//测试
const toDeposit=()=>{
    router.push('/center/deposit')
}



</script>

<style scoped lang="less">
.center {
    background-color: #f5f8f8;

    
    .container {
        margin: 0 auto;
        width: 1200px;

        
        .center-body .all {
            margin-top: 20px;
        }
        .leftLine{
            border-left: 4px solid red;

        }
        .bottom-line{
            border-bottom: 4px solid red;
        }
        //改变侧边栏移入变色
        
       .el-menu-item:hover {
            background: #fff !important;
            color: #f00 !important;
        }

        .sellChecked{
            color: red;
        }
        .sell-hover:hover{
            color: red;
        }
        // .el-sub-menu:hover{
        //     border-left: 4px solid yellow;
        // }
        .item:hover{
            
            // box-sizing:content-box;
            border-left: 4px solid red;
            
        }
        // .bottom-item:hover{
        //         border-bottom:4px solid red;
        //     }
            //重写内部样式 自定义的覆盖掉
        .el-menu--horizontal>.el-menu-item.is-active{
            border-bottom:0.1px solid #ddd;
            // border-bottom:4px solid red;
        }
        

        //左侧列表
        .left {
            .navigation-block {
                background-color: #fff;
                border-radius: 4px;
                padding: 5px 0;
                // margin-bottom: 10px;

                .navigation-item {
                    .navigation-item-content {
                        font-size: 14px;
                        color: #111;
                        padding: 17px 21px;
                        cursor: pointer;
                        position: relative;
                        display: block;
                        text-decoration: none;
                    }
                }
          

            }
            .mb-10{
                margin-bottom: 10px;
            }
            .mt-10{
                margin-top: 10px;
            }

            .base-info {
                background-color: #fff;
                // box-shadow:  1px 1px .2px .2px #eee;
                padding: 21px 0;
                text-align: center;
                // background: #ddd;
                border-radius: 4px;
                margin-bottom: 10px;

                .account-avatar {
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    border-radius: 100%;
                    background-color: #eee;
                    background-size: cover;
                    background-position: 50%;
                    background-repeat: no-repeat;
                }

                .level_box {
                    padding: 2px 8px;
                    border-radius: 4px;

                    i {
                        // color: #fff;
                        width: 40px;
                        line-height: 1.15;
                        margin: 0 auto;
                        display: block;
                        background: linear-gradient(#ff289b, #ff43d0);
                        background-repeat: no-repeat;
                        font-style: italic;
                    }
                }

            }
        }

        //右侧列表

        .right {

          
            // background-color: #fff;//记得删除
            .header-container {
                background-color: #fff;
                margin-top: 10px;
                border-radius: 4px;
                .header-tab-item {
                    padding: 28px 17px;
                    color: #111;
                    font-size: 14px;

                }
            }
            .x{
                width: 875px;
                height: 35px;
                // line-height: 1.5;
                padding-top:20px;
                padding-left:28px;
                color: #111;
                font-size: 14px;
            }

        }



        .ep-bg-purple-dark {
            background-color: #ddd;
        }

        .grid-content {
            border-radius: 4px;
            height: 200px;
        }

        .grid-content-main {
            height: 1200px;
        }











    }

}
</style>
